<template>
	<el-dialog v-model="visible" :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" draggable>
		<el-form ref="dataFormRef" :model="dataForm" :rules="dataRules" :label-width="100">
			<el-form-item label="车辆类型" prop="carTypeId">
				<el-select v-model="dataForm.carTypeId" placeholder="车辆类型" style="width: 240px">
					<el-option v-for="item in label.type" :key="item.id" :label="item.id + ' : ' + item.name" :value="item.id" />
				</el-select>
			</el-form-item>
			<el-form-item label="押金" prop="deposit">
				<el-input v-model="dataForm.deposit" placeholder="押金（单位：元）"></el-input>
			</el-form-item>
			<el-form-item label="起步价" prop="startCost">
				<el-input v-model="dataForm.startCost" placeholder="起步价（单位：元）"></el-input>
			</el-form-item>
			<el-form-item label="基础时长" prop="startTime">
				<el-input v-model="dataForm.startTime" placeholder="基础时长（单位：分钟）"></el-input>
			</el-form-item>
			<el-form-item label="调度费" prop="dispatchFee">
				<el-input v-model="dataForm.dispatchFee" placeholder="调度费（单位：元）"></el-input>
			</el-form-item>
			<el-form-item label="超时费率" prop="overtimeUnitCost">
				<el-input v-model="dataForm.overtimeUnitCost" placeholder="超时费率（元/分钟）"></el-input>
			</el-form-item>
			<el-form-item label="临时锁车费率" prop="tmpLockUnitCost">
				<el-input v-model="dataForm.tmpLockUnitCost" placeholder="临时锁车费率（元/分钟）"></el-input>
			</el-form-item>
			<el-form-item label="免费时长" prop="freeDuration">
				<el-input v-model="dataForm.freeDuration" placeholder="免费时长（单位：分钟）"></el-input>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="visible = false">取消</el-button>
			<el-button type="primary" @click="submitHandle()">确定</el-button>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus/es'
import { useOrderCostRuleApi, useOrderCostRuleSubmitApi } from '@/api/order/costRule'
import { userLabelAPi } from '@/api/order/type'

import { useRoute } from 'vue-router' // 新增路由引用

const route = useRoute()

const emit = defineEmits(['refreshDataList'])

const visible = defineModel<boolean>('visible')
const dataFormRef = ref()

const dataForm = reactive({
	id: '',
	carTypeId: '',
	scenicId: '',
	deposit: '',
	startCost: '',
	startTime: '',
	dispatchFee: '',
	overtimeUnitCost: '',
	tmpLockUnitCost: '',
	freeDuration: '',
	createTime: '',
	updateTime: '',
	deleted: '',
	updater: '',
	creator: ''
})

const label = reactive({
	type: [{
		name: "",
		id: ""
	}]
})



const init = (id?: number, scenicId?: String) => {
	if (scenicId) {
		Object.assign(dataForm, {
			scenicId: scenicId
		})
	}

	getLabelList()

	if (id) {
		getCostRule(id)
	}


}



const getCostRule = (id: number) => {
	useOrderCostRuleApi(id).then(res => {
		Object.assign(dataForm, res.data)
	})
}


const dataRules = ref({
	carTypeId: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
	scenicId: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
	deposit: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
	startCost: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
	startTime: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
	dispatchFee: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
	overtimeUnitCost: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
	tmpLockUnitCost: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
	freeDuration: [{ required: true, message: '必填项不能为空', trigger: 'blur' }]
})

// 获取标签
const getLabelList = () => {
	userLabelAPi().then((res) => {
		label.type = res.data
	})
}

// 表单提交
const submitHandle = () => {
	dataFormRef.value.validate(async (valid: boolean) => {
		if (!valid) {
			return false
		}
		useOrderCostRuleSubmitApi(dataForm).then(() => {
			ElMessage.success({
				message: '操作成功',
				duration: 500,
				onClose: () => {
					visible.value = false
					emit('refreshDataList')
				}
			})
		})
	})
}

defineExpose({
	init
})



</script>
